<template>
    <div>
        <el-row style="height: 200px">
            <el-col :span="6">
                <div style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          ">
                    <div class="card" style="
         
              background: #3c9209;
      
            ">
                        <div class="number" style="">{{ data.userNum }}</div>
                        <div class="text" style="">数据库用户总数</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          ">
                    <div class="card" style="
              background: #2d82e0;

            ">
                        <div class="number" style="">{{ data.picNum }}</div>
                        <div class="text" style="">数据库CT影像数量</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          ">
                    <div class="card" style="
            background: #e32221;
     
            ">
                        <div class="number" style="">{{ data.trNum }}</div>
                        <div class="text" style="">数据库CT影像训练次数</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          ">
                    <div class="card" style="
          background: #f8dc3a;

            ">
                        <div class="number" style="">{{ data.historyNum }}</div>
                        <div class="text" style="">患者CT影像上传次数</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-top: 50px;">
            <el-col style="display: flex; align-items: center; justify-content: center" :span="8">
                <Echart :options="options"></Echart>
            </el-col>
            <el-col style="display: flex; align-items: center; justify-content: center" :span="8">
                <Echart :options="options2"></Echart>
            </el-col>
            <el-col style="display: flex; align-items: center; justify-content: center" :span="8">
                <Echart :options="options3"></Echart>
            </el-col>
        </el-row>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Echart from "@/components/echart.vue";
import { cudata } from "@/api";
const data = ref<any>({})
const init = async () => {
    let res = await cudata()
    console.log(res, 'res');
    data.value = res.data
    options.series[0].data = [
        {
            value: data.value.type[0].value,
            itemStyle: {
                color: '#3c9209'
            }
            ,
        }, {
            value: data.value.type[1].value,
            itemStyle: {
                color: '#f8dc3a'
            }
            ,
        }, {
            value: data.value.type[2].value,
            itemStyle: {
                color: '#e32221'
            }
            ,
        }]
    options2.series[0].data = data.value.age
    options3.series[0].data = data.value.sex
}
init()
const options = reactive({
    title: {
        text: '肺部CT影像类型数据'
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: "category",
        data: ["正常肺部", "轻微肺炎", "严重肺炎"],
    },
    yAxis: {
        type: "value",
    },
    series: [
        {
            data: [
                {
                    value: 20,
                    itemStyle: {
                        color: '#3c9209'
                    }
                    ,
                }, {
                    value: 1,
                    itemStyle: {
                        color: '#f8dc3a'
                    }
                    ,
                }, {
                    value: 2,
                    itemStyle: {
                        color: '#e32221'
                    }
                    ,
                }],
            type: "bar",
        },
    ],
});
const options2 = reactive(
    {
        title: {
            text: '患者年龄数据'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '10%',
            left: 'center'
        },
        series: [
            {
                name: '患者年龄数据',
                type: 'pie',
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    }
);
const options3 = reactive({
    title: {
        text: '患者性别数据'
    },
    legend: {
        top: '10%',
        left: 'center'
    }, tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '患者性别数据',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            data: [
                { value: 40, name: 'rose 1' },
                { value: 38, name: 'rose 2' },
                { value: 32, name: 'rose 3' },
                { value: 30, name: 'rose 4' },
                { value: 28, name: 'rose 5' },
                { value: 26, name: 'rose 6' },
                { value: 22, name: 'rose 7' },
                { value: 18, name: 'rose 8' }
            ]
        }
    ]
});
</script>

<style lang="scss" scoped>
.card {
    width: 360px;
    height: 150px;

    border-radius: 6px;
    color: white;
    display: flex;
    padding: 0px 0 0 100px;
    justify-content: center;
    box-sizing: border-box;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

    .number {
        font-weight: 600;
        font-size: 42px;
        letter-spacing: 2px;

    }

    .text {
        margin-top: 10px;
    }
}
</style>
